<template>
    <div>
        <div class="header">
            <van-nav-bar title="视频" left-arrow @click-left="back" />
        </div>
        <!-- <div class="searchBox">
            <div @click='back' class="backBtn">
                <img class='backIcon' src="../../assets/greater.png" alt>
            </div>
            <div class="navTit">视频</div>
            <div>
            </div>
        </div> -->
        <div class="content">
            <!-- 滑动手势开始 -->
            <van-swipe :initial-swipe="showStop" vertical :show-indicators="false" ref="doing" @change="onChange">
                <van-swipe-item v-for="(item, index) in videoList" :key="index">
                    <!-- 背景 -->
                    <img class="bgc" :src="alPath + 'zhonghui/topic/' + item.topicCover" alt="">
                    <!-- 视频 -->
                    <div class="video-box" @click="videoDataStatus(index)" v-if="item.topicCover">
                        <video v-if="!systemIos" class="video" ref="video" loop="loop"
                            :src="alPath + 'zhonghui/topicCoverpic/' + item.topicContent" width="100%" height="100%"
                            :id="'video' + index" webkit-playsinline="true" x5-video-player-type="h5"
                            x5-video-player-fullscreen="true" x-webkit-airplay="allow" playsinline="true"
                            :poster="alPath + 'zhonghui/topic/' + item.topicCover" :autoplay="item.isAuto"
                            type="video/mp4">
                            <source :src="alPath + 'zhonghui/topicCoverpic/' + item.topicContent" type="video/mp4" />
                        </video>

                        <video v-else class="video" ref="video"
                            :src="alPath + 'zhonghui/topicCoverpic/' + item.topicContent" :id="'video' + index"
                            width="100%" height="100%" type="video/mp4" object-fit='fill' :autoplay="item.isAuto"
                            loop="loop" poster="../../assets/video/video-bg.png" autobuffer preload="none"
                            webkit-playsinline playsinline="true">
                        </video>

                    </div>
                    <!-- 点赞 -->
                    <div class="good" @click="goodCont(item, '0', index, item.hand_status)">
                        <img :class="item.hand_status ? 'doing' : ''" :src="item.hand_status ? good2 : good1" alt="">
                        <div>{{ item.priseCount == null ? 0 : item.priseCount }}</div>
                    </div>
                    <!-- 评论 -->
                    <div class="talk" @click="talkShow(item.topicId, index)">
                        <img src="../../assets/video/talk.png" alt="">
                        <div>{{ item.comment_num == null ? 0 : item.comment_num }}</div>
                    </div>
                    <!-- 分享 -->
                    <div class="share" @click="toShare(item.topicId)">
                        <img src="../../assets/video/share.png" alt="">
                        <!-- <div>{{item.share_num==null?0:item.share_num}}</div> -->
                    </div>
                    <!-- 商品 -->
                    <div class="posa">
                        <div class="product" @click="hrefDetail(item.productId)" v-if="item.productId != null">
                            <img class="pro-img" :src="alPath + 'zhonghui/product/' + item.productPic" alt="">
                            <div class="pro-name">{{ item.productName }}</div>
                            <div class="pro-text">{{ item.productTitle }}</div>
                            <div class="pro-price" v-if="item.productPrice">￥{{ (item.productPrice * 1).toFixed(2) }}
                            </div>
                        </div>
                        <!-- 文字描述 -->
                        <div class="info">
                            <div class="info-title">{{ item.hv_name }}</div>
                            <div class="info-text">{{ item.hv_synopsis }}</div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <!-- 滑动手势结束 -->


            <!-- 评论弹窗开始 -->
            <van-popup v-model="show" round position="bottom" :style="{ height: '440px' }">
                <div class="poopup">
                    <div class="popup-title">{{ num }}条评论</div>
                    <div class="popup-close" @click="show = false">
                        <van-icon name="cross" />
                    </div>
                    <div class="cont-talk" v-if="num">
                        <div class="talk-item" v-for="(item, index) in comments" :key="index">
                            <!-- 评论者信息 -->
                            <div class="talk-info">
                                <img :src="alPath + 'zhonghui/user/' + item.userImg" class="talk-img" @error="loadimg">

                                <span class="talk-name">{{ item.userName || '用户名' }}</span>&nbsp;
                                <span class="talk-time">{{ item.commentDate.split(" ")[0] }}</span>
                            </div>
                            <!-- 评论内容 -->
                            <div>{{ item.commentContent }}</div>
                            <!-- 评论点赞 -->
                            <!-- <div @click="goodCont(item, '1', index, item.hand_status)" class="talk-good"
                                :class="item.hand_status ? 'red' : 'ccc'">
                                <div :class="item.hand_status ? 'doing' : ''">
                                    <van-icon name="like" size="22" />
                                </div>
                                <div>{{ item.likes_num }}</div>
                            </div> -->
                        </div>
                        <div class="none-have">暂无更多了</div>
                    </div>
                    <div class="none-talk" v-else>暂时没有评论</div>
                    <div class="talk-btn">
                        <div>
                            <div>
                                <input type="text" v-model="contentTalk" placeholder="留下你的精彩评论吧">
                            </div>
                            <div class="btn" @click="addTalk">发布</div>
                        </div>
                    </div>
                </div>
            </van-popup>
            <!-- 评论弹窗结束 -->
            <div class="isTask" v-if="isTask">
                <img src="../../assets/chicken/task.png" alt="">
                <div class="task-box">
                    <div class="task-num">
                        <div :style="{ height: doing1 + 'px' }" class="task-num-tag"></div>
                        <div class="task-num-item">{{ taskNum }}s</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
let that
import { getAppTopicById, addTopicPrise, addComment, getVideo } from "../../network/luntan";
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            good1: require('../../assets/luntan/good-none.png'),
            good2: require('../../assets/luntan/good-great.png'),
            doing1: 0,
            taskNum: 15,
            statusLink: '',
            isTask: false,
            seeShow: false, //浏览视频
            isShow: false,
            likes: [],
            num: 0,
            status: false,
            talkStatus: false,
            show: false,
            contentTalk: '',
            videoStatus: true,
            videoList: [],
            topicId: 0,
            count: -1,
            moveY: 0,
            startY: 0,
            addStatus: -1,
            numCount: 0,
            comments: [],
            doingSwipe: -1,
            index: 0,
            systemIos: false,
            showStop: 0,
            isFirst: true,
            shareVideoId: 0,
            isGetSuccess: false,//是否成功获取福袋
            fkFlag: 0,
            fkNum: 0,
            taskFlag: 0,//  1 小鸡活动  2 门店活动

            todayIsShare: false,//判断今日是否已经分享了
            todayInfo: '',

            selectIndex: -1


        }
    },
    mounted() {

    },
    methods: {

        // 评论弹窗
        talkShow: function (val, index) {
            this.show = true
        },
        // 评论点赞 视频点赞
        goodCont: function (val, status, index, flag) {

            addTopicPrise({
                topicId: this.videoList[this.selectIndex].topicId,
                userId: localStorage.userId,
            }).then(res => {
                if (res.flag) {
                    this.videoList[this.selectIndex].hand_status = !this.videoList[this.selectIndex].hand_status
                    if (this.videoList[this.selectIndex].hand_status) {
                        this.videoList[this.selectIndex].priseCount++
                    } else {
                        this.videoList[this.selectIndex].priseCount--
                    }
                }
            })

            return

            var _this = this;
            if (val.user_id == localStorage.userId) {
                return this.$toast({
                    message: '多给别人赞一赞吧',
                    position: 'bottom',
                });
            }



            if (status == 0) {
                var num = Math.floor(Math.random() * 100)
                if (60 < num) {
                    this.fkNum = 6
                } else {
                    this.fkNum = Math.floor(Math.random() * (6 - 3) + 3)
                }

                // 视频点赞  获取该视频标签
                console.log(val);
                if (!flag && val.tagIds.length != 0) {
                    var arr = localStorage.userTagList ? JSON.parse(localStorage.userTagList) : []
                    arr.push(...val.tagIds)
                    localStorage.userTagList = JSON.stringify(Array.from(new Set(arr)))
                }
            }


            addHealthVideoLike({
                flag: !flag ? 'add' : 'cancel',
                hvId: val.topicId,
                commentId: status == 1 ? val.hvc_id : 0,
                otherUserId: status == 1 ? val.user_id : 0,
                userId: localStorage.userId,
                jifuNum: _this.fkNum
            }).then(res => {
                if (res.flag) {
                    val.hand_status = !val.hand_status;
                    if (val.hand_status) {
                        val.likes_num++;
                    } else {
                        val.likes_num--;
                    }
                    if (status == "0") {
                        _this.videoList.splice(index, 1, val)
                    } else {
                        _this.comments.splice(index, 1, val)
                    }
                }
            })

        },
        // 评论 发布按钮
        addTalk: function () {
            if (this.contentTalk == '') {
                return this.$toast('请输入评论内容');
            }

            this.addTalkData(this.contentTalk)

        },
        // 发布评论
        addTalkData: function (contentTalk) {
            var _this = this;
            _this.isShow = true;
            var time = this.getNowDate();
            var user_name = JSON.parse(localStorage.user).userName;
            addComment({
                commentContent: contentTalk,
                commentDate: time,
                topicId: this.videoList[this.selectIndex].topicId,
                userId: localStorage.userId,
                userName: user_name,
                commentFlag: 1,
                parentId: 0,
                topping: 0,
                flag: 'add'
            }).then(res => {
                if (res.flag) {
                    this.$toast({
                        message: "评论成功",
                        position: "bottom"
                    });
                    this.videoList[this.selectIndex].comment_num++
                    this.num++
                    this.comments.unshift({
                        userImg: JSON.parse(localStorage.user).userImg,
                        commentContent: contentTalk,
                        commentDate: '刚刚',
                        userId: localStorage.userId,
                        userName: JSON.parse(localStorage.user).userName,
                    })

                    //清空输入框
                    this.contentTalk = "";

                }
            })
        },


        getList: function (status, num) {
            var _this = this;
            getVideo({
                page: 1,
                size: 100
            }).then(res => {
                if (res.flag) {
                    var videos = res.data.list;
                    for (var i = 0; i < videos.length; i++) {
                        videos[i].isAuto = false;
                        if (localStorage.hv_id == videos[i].topicId) {
                            videos[i].isAuto = true
                            _this.showStop = i;
                            this.selectIndex = i
                        }
                        console.log(_this.showStop);
                    }


                    console.log(_this.showStop);
                    console.log(videos);


                    _this.videoList = videos;


                    this.getVideoDetail()


                    sharehrefTitle = _this.videoList[_this.showStop].topicTitle
                    state = _this.videoList[_this.showStop].topicId + "@" + localStorage
                        .shop_id + "@" +
                        localStorage.userId + "@8";
                    _this.statusLink = _this.videoList[_this.showStop].topicId
                    share_img = alPath + 'zhonghui/topic/' + _this.videoList[_this.showStop]
                        .topicCover;
                }
            })

        },

        getVideoDetail() {
            console.log(this.selectIndex);
            getAppTopicById({
                userId: localStorage.userId,
                topicId: this.videoList[this.selectIndex].topicId,
            }).then(res => {
                if (res.flag) {
                    var data = res.data;
                    console.log(data)
                    if (data.topic.tagIds != null) {
                        var arr = localStorage.userTagList ? JSON.parse(localStorage.userTagList) : [],
                            a = data.topic.tagIds.split(',');
                        arr.push(...a)
                        localStorage.userTagList = JSON.stringify(Array.from(new Set(arr)))
                    }

                    this.videoList[this.selectIndex].priseCount = data.topic.priseCount
                    this.videoList[this.selectIndex].hand_status = data.topic.priseStatus == 1
                    this.videoList[this.selectIndex].comment_num = data.topicComment.length
                    this.num = data.topicComment.length
                    this.comments = data.topicComment
                    console.log(this.videoList);
                    console.log(this.comments);
                    this.$forceUpdate()

                }
            })

        },

        // 划动 触发
        onChange: function (val) {
            for (var i = 0; i < this.videoList.length; i++) {
                this.videoList[i].isAuto = false;
                var videoEnd = document.getElementById('video' + i);
                videoEnd.pause();
            };
            this.selectIndex = val
            this.getVideoDetail()
            this.$set(this.videoList[val], 'isAuto', true);
            document.getElementById('video' + val).play();
            sharehrefTitle = this.videoList[val].topicTitle
            share_img = alPath + 'zhonghui/topic/' + this.videoList[val].topicCover;
            if (!this.systemIos) {
                for (var i = 0; i < this.videoList.length; i++) {
                    if (val != i) {
                        console.log(i);
                        this.$set(this.videoList[i], 'isAuto', false);
                        var videoEnd = document.getElementById('video' + i);
                        videoEnd.pause();
                    }
                }
            }
        },
        // 点击视频
        videoDataStatus: function (val) {
            this.videoStatus = !this.videoStatus;
            var videoEnd = document.getElementById('video' + val);
            if (this.videoStatus == true) {
                this.$refs.video[0].pause();
            } else {
                this.$refs.video[0].play();
            }
            console.log(JSON.stringify(this.videoList[val]));

            console.log(JSON.stringify(videoEnd));

            console.log(videoEnd.paused);
            // return

            if (videoEnd.paused) {
                var that = this
                if (this.isFirst) {
                    this.isShow = true
                    this.isFirst = false
                }
                setTimeout(() => {
                    videoEnd.play();
                    that.isShow = false
                }, 200)
            } else {
                setTimeout(() => {
                    videoEnd.pause();
                }, 200)
                console.log("视频已经在播放中");
            }
        },
        hrefDetail: function (product_id) { //商品详情页跳转
            localStorage.product_id = product_id;
            this.$router.push('/detail')

        },
        back() {
            this.$router.go(-1)
        },

        toShare: function (id) {
            console.log(id);
            this.shareVideoId = id
            shareHref();
        },
        loadimg(e) {
            var img = e.srcElement;
            img.src = require('../../assets/geren/timg.png')
        },


        taskSee: function () {
            var _this = this;
            _this.isTask = true;
            var timer = setInterval(function () {
                if (_this.taskNum > 0) {
                    _this.taskNum--;
                } else {

                    _this.checkTodayActive(4)

                    _this.isTask = false;
                    clearInterval(timer)
                }
                _this.doing1 = (_this.doing1 * 1) + 2.5;
            }, 1000)
        },

        DateDiff(sDate1, sDate2) {
            var aDate, oDate1, oDate2, iDays;
            aDate = sDate1.split("-");
            oDate1 = new Date(aDate[1] + "," + aDate[2] + "," + aDate[0]);
            aDate = sDate2.split("-");
            oDate2 = new Date(aDate[1] + "," + aDate[2] + "," + aDate[0]);
            //把相差的毫秒数转换为天数 
            iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
            return iDays;
        },
        getNowTime() {
            var myDate = new Date;
            var year = myDate.getFullYear();
            var mon = myDate.getMonth() + 1;
            mon = mon < 10 ? '0' + mon : mon
            var date = myDate.getDate();
            date = date < 10 ? '0' + date : date
            var date1 = myDate.getDate() + 1;
            date1 = date1 < 10 ? '0' + date1 : date1
            var hours = myDate.getHours();
            hours = hours < 10 ? '0' + hours : hours
            var minutes = myDate.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = myDate.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds
            return year + "-" + mon + "-" + date

        },
        checkTodayActive(flag) {
            console.log(flag);
            console.log(this.todayInfo);
            console.log(this.todayInfo.list.findIndex(x => x === (flag)));
            if (this.todayInfo.list.findIndex(x => x === (flag)) == -1) {
                this.todayInfo.list.push(flag)
                this.$toast(flag == 4 ? '已完成浏览视频任务' : '已完成分享视频任务')
                localStorage.shopActiveInfo = JSON.stringify(this.todayInfo)
                localStorage.removeItem("isPigTopicTask");
            }
        },

        getNowDate: function () {
            var date = new Date();
            var sign1 = "-";
            var sign2 = ":";
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day = date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
            var week = weekArr[date.getDay()];
            // 给一位数数据前面加 “0”
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
            var currentdate = year + sign1 + month + sign1 + day;
            return currentdate;
        },



    },
    created() {
        this.getList();

        //  1 小鸡活动  2  门店活动
        if (localStorage.isPigTopicTask == 1 || localStorage.isPigTopicTask == 4) {
            this.taskFlag = localStorage.isPigTopicTask
            this.taskSee();
        }
        var time = this.getNowTime()
        console.log(time);
        var shareTime = localStorage.shareVideoDay || '2024-06-25'
        this.todayIsShare = this.DateDiff(time, shareTime) == 0
        console.log(this.todayIsShare);

        // 有 且 是今日活动记录
        if (localStorage.shopActiveInfo) {
            var obj = JSON.parse(localStorage.shopActiveInfo)
            if (obj.time == this.getNowTime()) {
                this.todayInfo = JSON.parse(localStorage.shopActiveInfo)
                console.log(this.todayInfo);
            } else {
                this.todayInfo = {
                    time: this.getNowTime(),
                    list: []
                }
            }
        } else {
            this.todayInfo = {
                time: this.getNowTime(),
                list: []
            }
        }

        that = this
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

var sharehrefTitle = '', state = '', share_img = '', sharehrefDes = '大家都在中肽悦享讨论问题，你也来一起看看吧', sharehref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cf9f21ba0cbf62b&redirect_uri=https://www.ccclkj.cn/sharePage/ZTYXApp/appInto.html';
var shares = null;
var Intent = null,
    File = null,
    Uri = null,
    main = null;
// H5 plus事件处理
function plusReady() {
    updateSerivces();
    if (plus.os.name == "Android") {
        main = plus.android.runtimeMainActivity();
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
    }
}
if (window.plus) {
    plusReady();
} else {
    document.addEventListener("plusready", plusReady, false);
}
/**
 * 
 * 更新分享服务
 */
function updateSerivces() {
    plus.share.getServices(function (s) {
        shares = {};
        for (var i in s) {
            var t = s[i];
            shares[t.id] = t;
        }
    }, function (e) {
        mui.toast("获取分享服务列表失败：" + e.message);
    });
}
/**
 * 分享操作
 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
 * @param {Boolean} bh 是否分享链接
 */
function shareAction(sb, bh) {
    if (!sb || !sb.s) {
        mui.toast("无效的分享服务！");
        return;
    }

    var msg = {
        content: sharehrefDes,
        extra: {
            scene: sb.x,
            current_id: localStorage.userId,
        }
    };
    if (bh) {
        var state = that.shareVideoId + "@" + localStorage.shopId + "@" + localStorage.userId + "@2";
        // alert(state)
        msg.href = sharehref + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
        console.log(msg.href)

        msg.title = sharehrefTitle;


        msg.content = sharehrefDes;
        msg.thumbs = [share_img];
        msg.pictures = ["_www/logo.png"];
    } else {
        mui.toast("取消分享");
        if (pic && pic.realUrl) {
            msg.pictures = [pic.realUrl];
        }
    }
    // 发送分享
    if (sb.s.authenticated) {
        shareMessage(msg, sb.s);
    } else {
        mui.toast("未授权");
        sb.s.authorize(function () {
            shareMessage(msg, sb.s);
        }, function (e) {
            mui.toast("认证授权失败");
            //alert("认证授权失败："+e.code+" - "+e.message );

        });
    }
}
/**
 * 发送分享消息
 * @param {JSON} msg
 * @param {plus.share.ShareService} s
 */
function shareMessage(msg, s) {
    s.send(msg, function () {
        that.$toast("分享到\"" + s.description + "\"成功！ ");

        if (!that.todayIsShare) {
            var date = new Date()
            var time = date.getFullYear() + '-' + Number(date.getMonth() + 1) + '-' + date.getDate()
            localStorage.shareVideoDay = time
            that.todayIsShare = true
            that.checkTodayActive(5)
        }

    }, function (e) {
        that.$toast("分享到\"" + s.description + "\"失败: ");
    });
}
// 分析链接
function shareHref() {
    var shareBts = [];
    // 更新分享列表
    var ss = shares['weixin'];
    ss && ss.nativeClient && (shareBts.push({
        title: '微信朋友圈',
        s: ss,
        x: 'WXSceneTimeline'
    }),
        shareBts.push({
            title: '微信好友',
            s: ss,
            x: 'WXSceneSession'
        }));
    //          ss=shares['qq'];
    //          ss&&ss.nativeClient&&shareBts.push({title:'QQ',s:ss});
    // 弹出分享列表
    shareBts.length > 0 ? plus.nativeUI.actionSheet({
        title: '分享',
        cancel: '取消',
        buttons: shareBts
    }, function (e) {
        if (e.index == 0) {
            that.$toast("您已取消了分享哟~");
        }
        (e.index > 0) && shareAction(shareBts[e.index - 1], true);

    }) : plus.nativeUI.alert('当前环境无法支持分享链接操作!');
}

</script>

<style lang='less' scoped>
.backBtn {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.backIcon {
    font-size: 39.9975px;
    width: 36px;
    height: 36px;
}

.searchBox {
    position: fixed;
    top: 0;
    margin: 0 auto;
    padding-top: 63.9975px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 .9975px 6px #ccc;
}

.navTit {
    position: relative;
    // left: 40px;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchBox>div:last-child {
    margin-right: 30px;
    font-size: 28px;
}

.searchBox>div:last-child>img {
    width: 24px;
    height: 24px;
}


.content {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    left: 0;
    height: calc(100vh -90px);
    bottom: 0;
    background-color: #dcdcdc;
}

.van-swipe {
    position: relative;
    width: 100%;
    height: 100%;
}

.bgc {
    width: 120%;
    height: 120%;
    position: relative;
    top: -10%;
    left: -10%;
    filter: blur(12px);
    -webkit-filter: blur(12px);
}

.video {
    width: 100%;
    /* height: 210px; */
    height: 100%;
    z-index: 888;
}

.posa-play {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    z-index: 800;
}

.video-box {
    z-index: 88;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

.video-start {
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 999;
    font-size: 100px;
    color: #ff3b14;
}

.van-swipe-item {
    position: relative;
}

.good,
.talk,
.share {
    position: absolute;
    right: 24px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    z-index: 100;
    text-shadow: 0px 2px 4px rgba(51, 51, 51, 0.5);
}

.paly {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    margin-left: -100px;
    z-index: 888;
    left: 50%;
    margin-top: -100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    color: #dcdcdc;
}

.good img,
.talk img,
.share img {
    width: 64px;
    z-index: 96;
}

.good {
    bottom: 400px;
}

.talk {
    bottom: 548px;
}

.share {
    bottom: 220px;
}

.product {
    position: absolute;
    top: 0;
    left: 24px;
    background-color: #fff;
    border-radius: 10px;
    height: 160px;
    padding: 10px 10px 10px 166px;
    z-index: 90;
    width: 376px;
    box-sizing: border-box;
    margin-bottom: 28px;
}

.pro-name {
    font-weight: bold;
    font-size: 28px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pro-text {
    font-weight: 400;
    font-size: 24px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pro-img {
    width: 140px;
    height: 140px;
    position: absolute;
    left: 10px;
    border-radius: 10px;
    background: #FFE2E2;
}

.pro-price {
    height: 48px;
    border-radius: 8px;
    background-color: #ff3b14;
    color: #fff;
    line-height: 48px;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 192px;
    padding-right: 64px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

.pro-price::before {
    position: absolute;
    content: '';
    right: -32px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 6;
    background: linear-gradient(to bottom, #FF3B14, #FFCEC6);
}

.pro-price::after {
    position: absolute;
    content: '抢';
    z-index: 7;
    right: 16px;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info {
    position: relative;
    width: 100%;
    padding: 0 140px 0 24px;
    box-sizing: border-box;
    color: #fff;
    z-index: 92;
    text-shadow: 0px 2px 4px rgba(51, 51, 51, 0.5);
}

.info-text {
    font-size: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.info-title {
    font-size: 32px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 32px;
    margin-bottom: 16px;
}

.van-popup {
    overflow: hidden !important;
}

.poopup {
    position: absolute;
    width: 100%;
    height: calc(100% - 88px);
    left: 0;
    top: 0;
    z-index: 3000;
}

.showBox {
    position: fixed;
    width: 100%;
    height: calc(100% - 88px);
    left: 0;
    top: 0;
    background-color: red;
    z-index: 3000;
}

.popup-title {
    background-color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 32px;
    line-height: 96px;
    position: relative;
    z-index: 8;
    height: 96px;
    box-sizing: border-box;
}

.cont-talk,
.none-talk {
    font-size: 28px;
    height: calc(100% - 96px);
}

.cont-talk {
    overflow-y: scroll;
    padding: 0 24px;
    position: relative;
    top: -24px;
    z-index: 6;
}

.none-talk {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
}

.talk-btn {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 24px 12px 24px;
    background-color: #fff;
    bottom: 0;
}


.talk-btn>div {
    height: 80px;
    border-radius: 40px;
    background-color: #f0f0f0;
    padding-right: 140px;
    overflow: hidden;
}

.talk-btn>div>div>input {
    box-sizing: border-box;
    padding-left: 30px;
    width: 100%;
    background-color: #f0f0f0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 80px !important;
    line-height: 80px !important;
    font-size: 28px;
    border: none;
}

.btn {
    position: absolute;
    right: 24px;
    border-radius: 0 40px 40px 0;
    box-sizing: border-box;
    bottom: 12px;
    z-index: 66;
    background-color: #FF8023;
    color: #fff;
    width: 140px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 28px;
}

.talk-item {
    position: relative;
    padding-bottom: 24px;
    border-bottom: 2px solid #f1f1f1;
    padding-left: 104px;
    padding-top: 32px;
    padding-right: 60px;
}

.talk-info {
    display: flex;
    line-height: 28px;
    margin-bottom: 12px;
    padding-top: 8px;
}

.talk-name {
    font-weight: bold;
    color: #666666;
    margin-right: 12px;
}

.talk-time {
    font-size: 24px;
    color: #999;
    line-height: 24px;
    text-align: right;
    min-width: 100px;
    display: block;
    position: relative;
    top: 4px;
}

.talk-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 32px;
    background: #FFE2E2;
}

.talk-good {
    position: absolute;
    right: 0;
    top: 32px;
    font-size: 24px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 60px;
    justify-content: center;
    line-height: 24px;
    height: 88px;
}

.red {
    color: #ff3b14;

}

.doing {
    -webkit-animation: free_download 0.3s linear alternate;
    animation: free_download 0.3s linear alternate;
}

@-webkit-keyframes free_download {
    0% {
        -webkit-transform: scale(0.8);
    }

    50% {
        -webkit-transform: scale(0.6);
    }

    100% {
        -webkit-transform: scale(1.2);
    }
}

@keyframes free_download {
    0% {
        -webkit-transform: scale(0.8);
    }

    50% {
        transform: scale(0.6);
    }

    100% {
        transform: scale(1.2);
    }
}

.ccc {
    color: #999;
}

.popup-close {
    position: absolute;
    right: 32px;
    top: 32px;
    color: #666;
    font-weight: bold;
    z-index: 88;
}

.none-have {
    color: #999;
    text-align: center;
    padding-top: 24px;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.posa {
    position: absolute;
    bottom: 64px;
    width: 100%;
    min-height: 280px;
    padding-top: 200px;
    box-sizing: border-box;
}

.seeShow {
    width: 584px;
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.seeShow img {
    width: 84px;
}

.van-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.seeShow>div:nth-child(1) {
    font-size: 32px;
    font-weight: bold;
    padding-top: 40px;
    line-height: 34px;
    margin-bottom: 60px;
}

.seeShow>div:nth-child(3) {
    width: 324px;
    height: 72px;
    line-height: 72px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: #FF8023;
    border-radius: 36px;
    margin-bottom: 40px;
    margin-top: 64px;
    font-size: 28px;
}

.seeShow>div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-weight: bold;
}

.close {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 32px;
    color: #666;
}

.isTask {
    position: fixed;
    right: 0;
    bottom: 240px;
    z-index: 888;
    width: 234px;
}

.task-box {
    position: absolute;
    width: 232px;
    right: 22px;
    top: 0;
    text-align: center;
}

.isTask img {
    width: 100%;
}

.task-num {
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    width: 92px;
    height: 92px;
    box-sizing: border-box;
    border: 8px solid #fff;
    border-radius: 50%;
    margin-top: 72px;
    left: 50%;
    margin-left: -4px;
    overflow: hidden;
}

.task-num-item {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #F29D52;
    text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0;
}

.task-num-tag {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff;
}



.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.van-overlay {
    z-index: 30000;
}

.pupBc_2 {
    width: 748px;
    margin-top: 60px;
}

.pupBc {
    position: absolute;
    width: 560px;
    top: 50%;
    left: 50%;
    margin-left: -280px;
    margin-top: -244px;
}


.pup_2 {
    position: absolute;
    width: 596px;
    margin-top: 188px;
    margin-left: -292px;
    top: 50%;
    left: 50%;
}

.pup_2text {
    position: absolute;
    font-size: 32px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 88px;
    margin-top: 468px;
    letter-spacing: 4px;
    margin-top: 188px;
    top: 50%;
}

.feed {
    position: absolute;
    width: 208px;
    top: 50%;
    left: 50%;
    margin-left: -104px;
    margin-top: -100px;
}

.feed_text {
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    color: #B25D0A;
    letter-spacing: 4px;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: 128px;
    /* width: 174px; */
}

.pup_3 {
    position: absolute;
    width: 300px;
    margin-top: 296px;
    top: 50%;
    left: 50%;
    margin-left: -152px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pup_3text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 312px;
    margin-left: -68px;
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    width: 136px;
}



.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}


/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>